<template>
  <div>
    <!-- 导航栏 -->
    <nut-navbar @on-click-back="back" :rightShow="false" title="最新MV"></nut-navbar>
    <!-- 视频列表 -->
    <nut-infiniteloading
      @loadmore="onInfinite"
      :is-show-mod="true"
      :has-more="true"
      :is-loading="false"
      :threshold="200"
    >
      <ul class="list" v-for="item in this.data" :key="item.id">
        <li @click="toplay(item.id)">   
          <div class="cover">
            <p>{{item.name}}</p>
            <p>{{item.artistName}}</p>
          </div>
          <img :src="item.cover" alt />
        </li>
      </ul>
    </nut-infiniteloading>
    <!-- 功能组件 -->
    <!-- MV视频 -->
    <playpage :showmv="showmv" tname="showmv" :closelist="closelist" :curid="curid"></playpage>

  </div>
  
</template>
<script>
import {url,mvurl} from '../../api/api'
import playpage from './playpage'
export default {
  data() {
    return {
      showmv:false,
      data: this.$route.params.data,  //  mv信息
      curid:"",  //  当前点击的视频id
    };
  },
  components:{
   playpage
  },
  methods: {
    //  关闭视频回调函数
    closelist(show){
      this[show] = false
    },
    //  播放视频
   toplay(id){
     this.curid = id
     this.showmv = true
   },
    //  获取mv地址
    getmvurl(id){
      this.$axios.get(`${url}${mvurl}`,{
        params:{
          id: id
        }
      }).then(data=>{

      },err=>{
        this.$notify.danger(err)
      })
    },
    //  导航回调函数
    back() {
      this.$router.go(-1);
    },
    //  无限循环
    onInfinite() {
      this.isLoading = true;
      this.timer = setTimeout(() => {
        if (this.page <= 5) {
          this.data = new Array(this.num * this.page);
          this.page = this.page + 1;
        } else {
          this.isHasMore = false;
        }
        this.isLoading = false;
      }, 100);
    }
  },
  destroyed() {
    clearTimeout(this.timer);
  }
};
</script>
<style scoped>
.nut-infiniteloading {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.nut-infiniteloading .list {
  width: 150px;
  height: 100px;
  margin: 10px;
}
.list {
  position: relative;
}
.cover {
  width: 150px;
  position: absolute;
  color: #fff;
  top: 0;
  left: 0;
  padding-top: 62px;
}
.list li p {
  width: 150px;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}
.list li img {
  width: 150px;
  height: 100px;
  background: rgba(255, 255, 255, 0.9);
}
</style>